<template>
  <el-form-item :label="props.title" class="expand-form-item">
    <el-date-picker v-model="dateTime" type="datetime" placeholder="选择日期时间" :prefix-icon="Calendar" value-format="x" :key="props.title" :teleported="false" />
    <div v-if="props.children && props.children.length > 0" class="option-box">
      <div class="option-btn" @click="changeChildrenShow">
        <div class="option-btn-icon">
          <span :class="{ plus: childrenShow }"></span>
        </div>
        <p>{{ childrenShow ? "取消" : "拓展" }}</p>
      </div>
    </div>
  </el-form-item>
</template>

<script setup>
import { computed } from 'vue'
import { Calendar } from '@element-plus/icons-vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  field: {
    type: String,
    default: ''
  },
  reset: {
    type: Boolean,
    default: false //切换选项后是否重置时间
  },
  children: {
    type: Array,
    default: () => []
  },
  childrenShow: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:value', 'update:childrenShow'])
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits('update:childrenShow', !childrenShow.value)
}
const dateTime = computed({
  get: () => props.value,
  set: val => {
    emits('update:value', val)
  }
})
</script>

<style lang="scss" scoped>
.choose-timing {
  .el-radio {
    margin-right: 15px;
  }
  .el-radio:last-child {
    margin-right: 0;
  }
}
</style>
